<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交易曦游记</title>
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/border.css">
    <link rel="stylesheet" href="./style/index.css">
    <link rel="stylesheet" href="./style/animation.css">
    <link rel="stylesheet" href="./style/media.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-logo">
                <img src="./images/Logo.png" alt="logo" width="44" height="45">
                <h1>交易曦游记</h1>
            </div>
            <div class="header-user">
                <img src="./images/Oval.png" alt="头像">
                <span>欢迎，木板</span>
            </div>
        </header>
        <div class="main">
            <article class="main-content">
                <div class="banner">
                    <img class="graffiti" src="./images/Graffiti.png" alt="涂鸦">
                    <img class="money" src="./images/Money.png" alt="钱">
                    <img class="building" src="./images/Building.png" alt="建筑">
                    <img class="rocket" src="./images/Rocket.png" alt="火箭">
                    <img class="desert" src="./images/Desert.png" alt="沙漠">
                    <img class="xiaozhi" src="./images/XiaoZhi.png" alt="小智">
                    <img class="title" src="./images/Title.png" alt="标题">
                    <img class="update" src="./images/Update.png" alt="更新">
                    <img class="people" src="./images/People.png" alt="小人">
                </div>
                <div class="video">
                    <div class="video-box">
                        <h2>交易曦游记：记录真实交易员的人物纪实片</h2>
                        <div class="share">
                            <span>
                                <img src="./images/share.png" alt="分享">
                                分享
                            </span>
                            <a href="#">
                                <img src="./images/WeChat.png" alt="微信">
                            </a>
                            <a href="#">
                                <img src="./images/WeiBo.png" alt="微博">
                            </a>
                            <a href="#">
                                <img src="./images/QQ.png" alt="QQ">
                            </a>
                            <a href="#">
                                <img src="./images/QQZone.png" alt="QQ空间">
                            </a>
                        </div>
                        <div class="video-play">
                            <img src="./images/Play.png" alt="播放">
                        </div>
                        <video src="./video/video.mp4"></video>
                    </div>
                </div>
                <div class="mobile-box">
                    <div class="box-person">
                        <div class="person-title">
                            <p>交易员人物介绍</p>
                        </div>
                        <ul class="person-list">
                            <li>
                                <img src="./images/Oval2-xl.png" alt="用户">
                                <div class="person-name">
                                    <p>林则徐</p>
                                    <img src="./images/Down.png" alt="向下">
                                </div>
                            </li>
                            <li>
                                <img src="./images/Oval-xl.png" alt="用户">
                                <div class="person-name">
                                    <p>徐悲鸿</p>
                                    <img src="./images/Down.png" alt="向下">
                                </div>
                            </li>
                            <li>
                                <img src="./images/Oval3-xl.png" alt="用户">
                                <div class="person-name">
                                    <p>小小彬</p>
                                    <img src="./images/Down.png" alt="向下">
                                </div>
                            </li>
                            <li>
                                <img src="./images/Oval4-xl.png" alt="用户">
                                <div class="person-name">
                                    <p>小小彬</p>
                                    <img src="./images/Down.png" alt="向下">
                                </div>
                            </li>
                        </ul>
                        <div class="person-info">
                            <p>1785年，福建，清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                        </div>
                    </div>
                    <div class="mobile-talk">
                        <div class="talk-title">
                            <div></div>
                            <div></div>
                            <p>本集话题讨论</p>
                        </div>
                        <p>交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？</p>
                        <ul class="talk-list">
                            <li>
                                <div class="list-img">
                                    <i></i>
                                    <span>投票</span>
                                </div>
                                <p class="talk-count">已投 1209 票</p>
                            </li>
                            <li>
                                <div class="list-img">
                                    <i class="background: url('../images/Green.png') no-repeat center center;"></i>
                                    <span>投票</span>
                                </div>
                                <p class="talk-count">已投 1209 票</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="review">
                    <div class="title">
                        <h3>
                            <img src="./images/Icon-Rokect.png" alt="小标题火箭">
                            <span>往期回顾</span>
                            <img src="./images/Icon-Right.png" alt="小标题箭头">
                        </h3>
                        <a href="#">查看更多</a>
                    </div>
                    <ul class="review-list">
                        <li>
                            <img src="./images/Review-1.png" alt="">
                            <p>八周交易计划2 《我的信仰》</p>
                            <p>2017-01-20</p>
                        </li>
                        <li>
                            <img src="./images/Review-2.png" alt="">
                            <p>第八集：巅峰之战！谁是黑马？</p>
                            <p>2017-01-20</p>
                        </li>
                        <li>
                            <img src="./images/Review-3.png" alt="">
                            <p>巨债承压动真格，赚钱才是真本事！</p>
                            <p>2017-01-20</p>
                        </li>
                    </ul>
                </div>
                <div class="message">
                    <div class="title">
                        <h3>
                            <img src="./images/Icon-Rokect.png" alt="小标题火箭">
                            <span>留言区</span>
                            <img src="./images/Icon-Right.png" alt="小标题箭头">
                        </h3>
                    </div>
                    <div class="tips">
                        <p>
                            <i></i>
                            交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗?交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗?交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗?
                        </p>
                        <div class="connect c-left"></div>
                        <div class="connect c-right"></div>
                    </div>
                    <div class="comment">
                        <div class="comment-title">
                            <div class="text">
                                <p>
                                    <i></i>
                                    评论需要登录，您还没有登录
                                    <input type="text" name="" id="common-input" placeholder="请输入内容" >
                                </p>

                            </div>
                            <div class="login">
                                <a href="#">注册</a>
                                <a href="#">登录</a>
                                <br>
                                <br>
                                <a id="comment-button" href="javascript:;">留言</a>
                            </div>
                        </div>
                        <div class="line">
                            <span>最新评论(146)</span>
                        </div>
                        <div class="comment-box">
                            <ul class="comment-list">
                                <!-- <li>
                                    <div class="goods">0</div>
                                    <div class="content">
                                        <div class="content-top">
                                            <i></i>
                                            <div>
                                                <p class="user">扭转乾坤</p>
                                                <p class="info">温州 10:06</p>
                                            </div>
                                        </div>
                                        <div class="content-bottom">
                                            <p>大部分的赌徒都是赌久必输，而只有部分职业赌徒是赌久必赢的。可以说，赌久必输是生活中常见的现象</p>
                                            <div>
                                                <i></i>
                                                <span>回复</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="goods">0</div>
                                    <div class="content">
                                        <div class="content-top">
                                            <i></i>
                                            <div>
                                                <p class="user">扭转乾坤</p>
                                                <p class="info">温州 10:06</p>
                                            </div>
                                        </div>
                                        <div class="content-bottom">
                                            <p>大部分的赌徒都是赌久必输，而只有部分职业赌徒是赌久必赢的。可以说，赌久必输是生活中常见的现象</p>
                                            <div>
                                                <i></i>
                                                <span>回复</span>
                                            </div>
                                        </div>
                                    </div>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
                <aside class="sidebar">
                    <div class="sidebar-title">
                        <p>交易员人物介绍</p>
                    </div>
                    <div class="sidebar-content">
                        <div class="scroll">
                            <div class="content-inner">
                                <ul>
                                    <li class="person">
                                        <i></i>
                                        <div>
                                            <p>林则徐(1785年)，福建</p>
                                            <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                        </div>
                                    </li>
                                    <li class="person">
                                        <i></i>
                                        <div>
                                            <p>林则徐(1785年)，福建</p>
                                            <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                        </div>
                                    </li>
                                    <li class="person">
                                        <i></i>
                                        <div>
                                            <p>林则徐(1785年)，福建</p>
                                            <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                        </div>
                                    </li>
                                    <li class="person">
                                        <i></i>
                                        <div>
                                            <p>林则徐(1785年)，福建</p>
                                            <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                        </div>
                                    </li>
                                </ul>
                                <div class="content-talk">
                                    <div class="talk-box">
                                        <div class="talk-title">
                                            <p class="public">本集话题讨论</p>
                                        </div>
                                        <p>交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？</p>
                                        <ul class="talk-list">
                                            <li>
                                                <div class="list-img">
                                                    <i><p>投 票</p></i>
                                                    <p>我是选项1</p>
                                                </div>
                                                <p class="list-count">已投 1209 票</p>
                                            </li>
                                            <li>
                                                <div class="list-img">
                                                    <i><p>投 票</p></i>
                                                    <p>我是选项2</p>
                                                </div>
                                                <p class="list-count">已投 1209 票</p>
                                            </li>
                                        </ul>
                                        <i class="bitmap"></i>
                                    </div>
                                    <div class="salon">
                                        <div class="talk-title" style="background-color: #F8F6F3;">
                                            <p class="public" style="color: #C6544C;">线下沙龙招募活动</p>
                                        </div>
                                        <p>交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？交易简单看来？</p>
                                        <div class="btn">活动详情</div>
                                    </div>
                                    <div class="c-line"></div>
                                    <div class="join">
                                        <p>加入我们《交易曦游记》大家庭吧！</p>
                                        <div class="qc-code">
                                            <img src="./images/QC-Code.png" alt="二维码">
                                            <div>
                                                <p>交易曦游记</p>
                                                <p>微信号：jin10_domi</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <div class="hide-box">
                    <div class="back">×</div>
                    <div class="sidebar-title">
                        <p>交易员人物介绍</p>
                    </div>
                    <div class="sidebar-content">
                        <div class="content-inner">
                            <ul>
                                <li class="person">
                                    <i></i>
                                    <div>
                                        <p>林则徐(1785年)，福建</p>
                                        <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                    </div>
                                </li>
                                <li class="person">
                                    <i></i>
                                    <div>
                                        <p>林则徐(1785年)，福建</p>
                                        <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                    </div>
                                </li>
                                <li class="person">
                                    <i></i>
                                    <div>
                                        <p>林则徐(1785年)，福建</p>
                                        <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                    </div>
                                </li>
                                <li class="person">
                                    <i></i>
                                    <div>
                                        <p>林则徐(1785年)，福建</p>
                                        <p>清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="content-talk">
                                <div class="mobile-talk">
                                    <div class="talk-title">
                                        <div></div>
                                        <div></div>
                                        <p>本集话题讨论</p>
                                    </div>
                                    <p>交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？</p>
                                    <ul class="talk-list">
                                        <li>
                                            <div class="list-img">
                                                <i></i>
                                                <span>投票</span>
                                            </div>
                                            <p class="talk-count">已投 1209 票</p>
                                        </li>
                                        <li>
                                            <div class="list-img">
                                                <i class="background: url('../images/Green.png') no-repeat center center;"></i>
                                                <span>投票</span>
                                            </div>
                                            <p class="talk-count">已投 1209 票</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="join">
                                    <p>加入我们《交易曦游记》大家庭吧！</p>
                                    <div class="qc-code">
                                        <img src="./images/QC-Code.png" alt="二维码">
                                        <div>
                                            <p>交易曦游记</p>
                                            <p>微信号：jin10_domi</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
        <div class="mask"></div>
    </div>
<script type="module" src="./script/index.js"></script>
</body>
</html>